<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
		  <view class="logoView">
			<!-- logo -->
			<view class="logo">
				小U商城
			</view>
		  </view>
		  <view class="inputView">
			<input class="textinput" style="center" type="text"   placeholder="寻找商品"/>
		  </view>
		</view>
		
		<!-- 顶部导航  scroll-view -->
		<view class="tabs">
		    <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
		        <view class="uni-tab-item"  data-current="0" v-for="(item,index) in tabList" :key="item.id">
		            <text class="uni-tab-item-title" :class="tabCurrent==index?'uni-tab-item-title-active':''" @click="tabClick(index)">
						{{item.catename}}
					</text>
		        </view>
		    </scroll-view> 
		</view>
		<!-- 推荐轮播图 -->
		<view class="">
			<!-- {{this.$baseUrl}} -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="$baseUrl+item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			
				
			</swiper>
		</view>
		
		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
		  <view class="FunctNavLi">
			<image src="../../static/index/xiaohuoban.png" alt class="FunImg" />
			<p>限时抢购</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/jifentixicopy.png" alt class="FunImg" />
		  			<p>积分商城</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/lianxiwomen.png" alt class="FunImg" />
		  			<p>联系我们</p>
		  </view>
		  <view class="FunctNavLi" @click="toClassify">
		  			<image src="../../static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
		  			<p>限时抢购</p>
		  </view>
		</view>
		
		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
				  <image class="LimitedImg" src="../../static/index/xianshi.jpg" alt />
				  <label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
				  <label class="LimitTime">{{timeline.hour}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{timeline.minute}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{timeline.second}}</label>
				  <label class="Seckill">秒杀</label>
				</view>
				<image src="../../static/index/goods2.jpg" class="LimitedgoodsImg" alt="">
			</view>
			
			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>		
					<!-- <div> -->
					<view class="Cloth">
						<image  src="../../static/index/goods1.jpg" alt="">
					</view>
					
					<!-- </div> -->				
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		  <!-- 轮播图2 -->
		<div class="Swiper2">
		  <image class="Swiper2Img" src="../../static/index/swiper1.jpg" alt />
		</div>
		
		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags">
				<view class="tag_list" :class="current==0?'active_tag_list':''" @click="listClick(0)">
					<label for="">热门推荐</label>
				</view>
				<view class="tag_list" :class="current==1?'active_tag_list':''" @click="listClick(1)">
					<label for="">发现好货</label>
				</view>
				<view class="tag_list" :class="current==2?'active_tag_list':''" @click="listClick(2)">
					<label for="">只看专场</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product" v-if="list.length>0">
				<view class="product" v-for="(item,index) in list[current].content" :key="item.id" @click="toDetail(item.id)">
					<view class="GoodsLeft">
						<image class="GoodsImg" :src="$baseUrl+item.img" alt />
					</view>
					<view class="GoodsCont">
						<view class="GoodConTit">{{item.goodsname}}</view>
						<view class="GoodsPrice">￥{{item.price}}</view>
						<view class="Immed">立即抢购</view>
					</view>
				</view>
				
	
			</view>
		</view>
	</view>
</template>

<script>
	// import {http} from "../../utils/http.js";
	// import config from "../../utils/config.js";
  	export default{
		data(){
			return{
				tabList:[],		//顶部导航栏
				tabCurrent:0,
				list:[],		//列表内容
				current:0,		//商品列表当前选中
				banner:[],			//banner图片列表
				timeline:{hour:"00",minute:"00",second:"00"}
			}
		},
		onLoad(){
			this.getTabList()
			
			//获取banner
			this.getBanner()
			
			//倒计时
			this.getseckill()
			
			//获取列表页
			this.getList()
			
		},
		methods:{
			//跳转详情页
			toDetail(id){
				uni.navigateTo({
					url:"/pages/details/details?id="+id
				})
			},
			//点击商品列表中的商品
			listClick(index){
				this.current=index;
			},
			async getList(){
				var result =await this.$http("/api/getindexgoods").catch(err=>{
					console.log(err);
					return;
				})
				// console.log(result);
				this.list=result.data.list;		//渲染到页面
			},
			async getseckill(){
				var result =await this.$http("/api/getseckill").catch(err=>{
					console.error(err)
				})
				// console.log(result,111)
				if(result.data.list==null)return;
			
				var endtime=result.data.list[0].endtime;
				
				this.getTime(endtime)
				
				setInterval(()=>{

					this.getTime(endtime)
					
				},1000)

			},
			getTime(endtime){
				
				var nowtime=new Date().getTime()
				var timeline=Math.floor((endtime-nowtime)/1000);		//时间段  单位：秒
				
				var hour = Math.floor(timeline/3600)    //3.4
				var minute =Math.floor(timeline%3600/60)    //5.6
				var second=timeline%60;
				
				this.timeline={hour,minute,second}
				
			},
			toClassify(){
				uni.navigateTo({
					url:"/pages/classify/classify"
				})
			},
			//获取banner
			async getBanner(){
				var result =await this.$http("/api/getbanner").catch(err=>console.error(err))
				// console.log(result)
				this.banner=result.data.list;
			},
			//获取tab列表
			async getTabList(){
				var result =await this.$http("/api/getcate").catch(err=>{
					console.error(err)
				})
				this.tabList=result.data.list
			},
			//点击顶部的tab栏
			tabClick(index){
				this.tabCurrent=index;
			}
		}
		
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
</style>
